.shapes-1 {
  width: 40px;
  height: 40px;
  display: flex;
}

.shapes-1:before,
.shapes-1:after {
  content:"";
  flex:1;
  background:#f03355;
  animation: sp1 2s infinite;
  border-radius: 100px 0 0 100px;
  transform-origin: top right;
  transform: translateY(calc(var(--s,1)*0%)) rotate(0);
}
.shapes-1:after {
  transform-origin: bottom left;
  border-radius: 0 100px 100px 0;
  --s:-1;
}

@keyframes sp1 {
  33%  {transform: translate(0,calc(var(--s,1)*50%)) rotate(0)}
  66%  {transform: translate(0,calc(var(--s,1)*50%)) rotate(-90deg)}
  90%,
  100% {transform: translate(calc(var(--s,1)*-100%),calc(var(--s,1)*50%))  rotate(-90deg)}
}

.shapes-2 {
  width: 36px;
  height: 36px;
  color: #514b82;
  background:conic-gradient( from 134deg at top,currentColor  92deg,#0000 0);
  position: relative;
  animation: sp2-0 2s infinite linear;
}
.shapes-2:before,
.shapes-2:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background:currentColor; 
  transform-origin: top right;
  clip-path: polygon(100% 0,100% 100%,0 100%);
  inset:auto 100% 0 auto;
  animation: sp2-1 1s infinite linear alternate;
}

.shapes-2:after {
  inset:auto auto 0 100%;
  transform-origin: top left;
  --s:-1;
  clip-path: polygon(0 0,100% 100%,0 100%);
}

@keyframes sp2-0 {
 0% ,49.99% {transform:scaleY(1)}
 50%,90%    {transform:scaleY(-1)}
 100%       {transform:scaleY(-1) rotate(180deg)}
}

@keyframes sp2-1 {
 0% ,30%   {transform:rotate(calc(var(--s,1)*0))}
 70%,100%  {transform:rotate(calc(var(--s,1)*180deg))}
}


.shapes-3 {
  width: 36px;
  height: 36px;
  color: #25b09b;
  background:linear-gradient(45deg,#0000 24%,currentColor 0 76%,#0000 0);
  position: relative;
  animation: sp3-0 1.5s infinite;
}
.shapes-3:before,
.shapes-3:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background:currentColor; 
  transform-origin: top left;
  clip-path: polygon(-2px 0,0 -1px,100% 100%,-2px 100%);
  inset:auto auto 0 0;
  animation: sp3-1 1.5s infinite;
}

.shapes-3:after {
  inset:0 0 auto auto;
  transform-origin: bottom right;
  clip-path: polygon(0 0,calc(100% + 2px) 0,calc(100% + 2px) 100%,100% calc(100% + 1px));
}

@keyframes sp3-0 {
 0% ,50%   {transform:skewX(0)}
 90%,100%  {transform:skewX(-45deg)}
}

@keyframes sp3-1 {
 40%,100%  {transform:rotate(180deg);box-shadow: 0 0 0 3px;}
}


.shapes-4 {
  width: 40px;
  height: 40px;
  display: grid;
}
.shapes-4:before,
.shapes-4:after {
  content:"";
  background:orange;
  transform-origin:left;
  animation: sp4 2s infinite;
}
.shapes-4:before {
  transform-origin:right;
  --s:-1;
}

@keyframes sp4 {
   0%,
   10%   {transform:translate(0,0)  scale(1)}
   33%   {transform:translate(calc(var(--s,1)*50%),0)  scale(1)}
   66%   {transform:translate(calc(var(--s,1)*50%),calc(var(--s,1)*-50%))  scale(1)}
   90%,
   100%  {transform:translate(calc(var(--s,1)*50%),calc(var(--s,1)*-50%))  scale(0.5,2)}
}


.shapes-5 {
  width: 40px;
  height: 40px;
  color:#f03355;
  position: relative;
}
.shapes-5:before {
  content:'';
  position: absolute;
  inset:0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,  #0000, currentColor 1deg 120deg,#0000 121deg) top right,
    conic-gradient(from 120deg,#0000, currentColor 1deg 120deg,#0000 121deg) bottom,
    conic-gradient(from 240deg,#0000, currentColor 1deg 120deg,#0000 121deg) top left;
  background-size:40px 40px;
  background-repeat: no-repeat;
  animation: sp5 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes sp5 {
   33%  {inset:-8px;transform: rotate(0deg)}
   66%  {inset:-8px;transform: rotate(180deg)}
   100% {inset:0   ;transform: rotate(180deg)}
}

.shapes-6 {
  width: 60px;
  height: 60px;
  color: #514b82;
  position: relative;
}

.shapes-6::before,
.shapes-6::after {
  content: "";
  position: absolute;
  inset:0;
  background:
    linear-gradient(currentColor 0 0) 0 calc(var(--s,0)*-100%)/100% calc(100%/3),
    repeating-linear-gradient(90deg,currentColor 0 25%,#0000 0 50%) calc(var(--s,0)*100%) 50%/calc(4*100%/3) calc(100%/3);
  background-repeat: no-repeat;
  animation: sp6 2s infinite;
}
.shapes-6::after {
  --s:-1;
}

@keyframes sp6 {
    0%,
    10%  {transform:translateY(calc(var(--s,1)*0));   background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    33%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    66%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
    90%,
    100%  {transform:translateY(calc(var(--s,1)*0));  background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
}


.shapes-7 {
  width: 50px;
  height: calc(50px*0.866);
  position: relative;
  background:conic-gradient(from 120deg at 50% 64%,#0000, #25b09b 1deg 120deg,#0000 121deg);
  transform-origin: 50% 50%;
  animation: sp7-0 1.5s infinite cubic-bezier(0.3,1,0,1);
}
.shapes-7:before,
.shapes-7:after {
  content:'';
  position: absolute;
  inset:0;
  background:inherit;
  transform-origin: 50% 66%;
  animation: sp7-1 1.5s infinite;
}
.shapes-7:after {
  --s:-1;
}

@keyframes sp7-0 {
   0%,30%      {transform: rotate(0)}
   70%         {transform: rotate(120deg)}
   70.01%,100% {transform: rotate(360deg)}
}

@keyframes sp7-1 {
   0%      {transform: rotate(calc(var(--s,1)*120deg)) translate(0)}
   30%,70% {transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px),10px)}
   100%    {transform: rotate(calc(var(--s,1)*120deg)) translate(0)}
}


.shapes-8 {
  width: 20px;
  height: 20px;
  color: #514b82;
  background:currentColor;
  position: relative;
  transform-origin: top right;
  animation: sp8-0 2s infinite linear;
}
.shapes-8:before,
.shapes-8:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background:currentColor; 
  transform-origin: bottom right;
  clip-path: polygon(0 0,100% 100%,0 100%);
  inset:auto auto 100% 0;
  animation: sp8-1 1s infinite linear alternate;
}

.shapes-8:after {
  inset:auto auto 0 100%;
  transform-origin: top left;
  --s:-1;
}

@keyframes sp8-0 {
 0% ,49.99% {transform:scale(1)}
 50%,90%    {transform:scale(-1)}
 100%       {transform:scale(-1) rotate(180deg)}
}

@keyframes sp8-1 {
 0% ,30%   {transform:rotate(calc(var(--s,1)*0))}
 70%,100%  {transform:rotate(calc(var(--s,1)*90deg))}
}

.shapes-9 {
  width: 60px;
  height: 60px;
  color: orange;
  background:
    linear-gradient(currentColor 0 0) left   20px top    0,
    linear-gradient(currentColor 0 0) top    20px right  0,
    linear-gradient(currentColor 0 0) right  20px bottom 0,
    linear-gradient(currentColor 0 0) bottom 20px left   0;
  background-size:calc(100%/3) calc(100%/3);
  background-repeat: no-repeat;
  animation: 
    sp9-1 .75s infinite alternate linear,
    sp9-2 1.5s infinite;
}


@keyframes sp9-1 {
 90%,100% {background-size:calc(2*100%/3) calc(100%/3),calc(100%/3) calc(2*100%/3)}
}
@keyframes sp9-2 {
 0%,49.99% {transform:scaleX(1)}
 50%,100%  {transform:scaleX(-1)}
}

.shapes-10 {
  width: 40px;
  height: 40px;
  display: grid;
  animation: sh10-0 1.5s infinite linear;
}
.shapes-10:before,
.shapes-10:after {
  content: "";
  grid-area: 1/1;
  background:#25b09b;
  animation: inherit;
  animation-name: sh10-1
}
.shapes-10:after {
  transform-origin: bottom right;
  --s:1;
}

@keyframes sh10-0 {
  0%,66%      {transform:scaleY(1)}
  66.01%,100% {transform:scaleY(-1)}
}

@keyframes sh10-1 {
  0%,
  10%   {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*90deg));clip-path: polygon(0 0,0 100%,100% 100%)}
  33%   {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*0deg)); clip-path: polygon(0 0,0 100%,100% 100%)}
  66%   {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*0deg)); clip-path: polygon(0 0,0 100%,100% 0)}
  66.01%{transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*0deg)); clip-path: polygon(0 0,0 100%,100% 100%)}
  90%,
  100%  {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*90deg));clip-path: polygon(0 0,0 100%,100% 100%)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}


* {
  box-sizing: border-box;
}